Capítulo 13

Este resumo é fruto de um estudo das aulas 2, 3, 4, 5, 6, 7 e 8 do primeiro módulo do curso de HTML 5 e CSS 3 feito através do canal no youtube do Gustavo Guanabara.

Cores

As cores influenciam bastante na experiência do usuário do site, agindo no subconsciente das pessoas provocando emoções que contribuem para a decisão do usuário, de permanecer no site e consumir o conteúdo nele contido ou não. Podemos encontrar em alguns artigos o poder que as cores tem e como elas podem influenciar nossos consumidores, como por exemplo, o artigo Estudo e Significado das Cores (2022) de Neil Patel, Psicologia das Cores: guia avançado para profissionais do site “Matilde filmes” e Entenda o que é Psicologia das Cores e descubra o significado de cada cor de Mateus clemente. Neles, podemos encontrar uma abordagem profissional da influência em nós. .

Tabela 1 - A influencia das cores nas emoções

Achei bonito, mas não sei explicar porquê

A simetria geométrica e a paletas de cores influenciam e muito na nossa perspectiva de beleza, coisas construidas com a proporção auréa, também conhecida como número de ouro (1,618..) e a sequência de Fibonacci (1, 1, 2, 3, 5, 8, 13,...) nos causam esse efeito. Somos capazes de perceber uma "harmonia" em um conjunto de cores, sem nem mesmo saber torna a ciência por trás disso.

círculo cromático

Um sitema de cores organizados em forma de círculo no qual nos possibilita catalogar e utilizar uma grande quantidade de possibilidades e tons de cores, aproximadamente 65 milhões de cores. Nele, temos as cores primárias, seundárias e terciárias

fonte: comodesenharecolorir.com

Tabela 2 - Técnicas de harmonização de cores.

Técnica	Descrição
Temperatura	As cores quentes, criam uma sensação de calor e proximidade. Já as cores frias, estão associadas a sensações mais calmas, de frescor e tranquilidade.
Cores Complementares	São aquelas que apresentam o maior contraste entre si. Elas estão localizadas do lado imediatamente oposto do círculo cromático.
Cores análogas	São aquelas que são imediatamente vizinhas entre si.
Cores análogas mais uma complementar	Essa técnica quebra um pouco o ritmo semelhante das cores análogas, adicionando uma cor que cria um grande contraste com as três análogas.
Cores análogas relacionadas	Nesse tipo de harmonia, escolhemos duas cores análogas (consecutivas) e depois pulamos uma terceira cor (em qualquer direção) e escolhemos a quarta.
Cores intercaladas	Um tipo menos usado de harmonia, já que às vezes não funciona tão bem assim. Vamos escolher a primeira cor e depois mais duas com intervalo constante entre elas.
Cores triádicas	Esse esquema gera sempre um triângulo equilátero e cria uma opção que sempre possui um ótimo contraste entre as cores.
Cores em quadrado	Esse esquema gera sempre um quadrado perfeito com os pontos selecionados.
Cores tetrádicas	Com essa técnica, vamos escolher dois pares de cores complementares, que não serão necessariamente análogas ou consecutivas. Isso vai nos garantir dois pares de cores, com bastante contraste entre si.
Monocromia	Essa combinação geralmente gera pouquíssimo contraste entre as cores escolhidas, mas acaba gerando um resultado visual bem agradável aos olhos, conhecido como “degradê”.

Tabela 3 - Como capturar cores na Internet

Representação das cores nas CSSs através de 4 métodos.

• Representação da cor azul por nome (em inglês);

   color: blue;

• Representação da cor azul por código hexadecimal (0 1 2 3 4 5 6 7 8 9 A B C D E F )

  color: #0000ff

  (os dois ultimos algarimos se referem à tonalidade)


• Representação da cor azul em rgb (red, green, blue);

  color: rgb(0, 0, 255) 

• Representação da cor azul por código hsl (Hue - matiz, Saturation, Luminosity);

   color: hsl(240, 100%, 50%);

Tag para fazer degradê

Para colocar um degradê na cor de fundo de um site por exemplo, pode ser feita da seguinte forma:

    body {
        background-image: linear-gradiente(to 'direction' 
        or '#deg', 'first color', 'seconcolor', 'third color', ++);
        background-attachment: fixed; (deixa a imagem de fundo fixo)
    }

Página inicial